<template>
  <div class="b-page">
    <el-pagination
      class="pagination"
      :style="getStyle"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :prev-text="prevText"
      :next-text="nextText"
      :background="true"
      :current-page.sync="currentPage"
      :page-size="size"
      :layout="layout"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'BPage',
  props: {
    prevText: {
      type: String,
      default: '上一页'
    },
    nextText: {
      type: String,
      default: '下一页'
    },
    background: {
      type: String,
      default: '#f1f1f1'
    },
    activeBackground: {
      type: String,
      default: '#333'
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 30
    },
    total: {
      type: Number,
      default: 1000
    },
    layout: {
      type: String,
      default: 'prev, pager, next' // sizes, prev, pager, next, jumper, ->, total, slot 具体参考 element UI
    }
  },
  data() {
    return {
      currentPage: 1,
      size: 30
    }
  },
  computed: {
    getStyle() {
      return {
        '--background': this.background,
        '--activeBackground': this.activeBackground
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.size = this.pageSize
      this.currentPage = this.pageNum
    },
    handleSizeChange(pageSize) {
      this.$emit('update:pageSize', pageSize)
      this.returnChange()
    },
    handleCurrentChange(pageNum) {
      this.$emit('update:pageNum', pageNum)
      this.returnChange()
    },
    returnChange() {
      this.$emit('change', {
        pageNum: this.currentPage,
        pageSize: this.size
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.b-page {
  & /deep/ .pagination {
    & .btn-prev, & .btn-next {
      padding: 0 8px;

      span {
        height: 32px;
        line-height: 32px;
      }
    }
    & .el-pager li, & .btn-prev, & .btn-next {
      height: 32px;
      line-height: 32px;
      text-align: center;
      min-width: 32px;
      font-size: 15px;
      font-weight: 400;
      color: #333333;
      background-color: var(--background);
      border-radius: 4px;
    }

    & .el-pager li:not(.disabled):hover {
      color: #666;
    }

     .btn-next.disabled, .btn-next:disabled, .btn-prev.disabled, .btn-prev:disabled, .el-pager li.disabled {
       color: #999;
       background: #f5f5f5;
     }

    & .el-pager .active {
      background-color: var(--activeBackground) !important;
      color: #fff !important;
    }
  }
}
</style>
